import React, { Component } from 'react'
import axios from '../utils/request'
import { Carousel } from 'antd';
import '../css/hot.css'

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
};

export default class Hot extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const { list } = this.state
        return (
            <div className="hot">
                <div className='swiper'>
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=4010794666,1105866046&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3153841751,2626550879&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=3807908422,801930145&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2939374391,560439438&fm=26&fmt=auto"></img></h3>
                        </div>
                    </Carousel>
                </div>
                <div>
                    {
                        list.length && list.map((item, index) => {
                            return <div key={index} className='time'>
                             
                               <img src={item.img}></img>
                                <div>
                                    <li>{item.sold}</li>
                                    <li><span>生活</span>&emsp;<span>{item.time}</span>&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                </div>
                               </div>
                           
                        })
                    }
                </div>
            </div>
        )
    }
}
